<template>
  <div>
    <div class="homestayOverview">
      <div class="item">
        <div class="left">
          <p>今日订单数</p>
          <p>{{ info.todayOrders || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index2/icon1.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日成交订单</p>
          <p>{{ info.todayPaidOrders || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index2/icon3.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日成交金额</p>
          <p>{{ info.totalAmount || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index2/icon2.png" />
      </div>

      <div class="item">
        <div class="left">
          <p>今日退款订单</p>
          <p>{{ info.todayRefundOrders || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index2/icon4.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日退款金额</p>
          <p>{{ info.totalRefundAmount || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index2/icon4.png" />
      </div>
    </div>
    <div class="chart">
      <div class="chartHead">
        <div class="left">商户分析</div>
        <div class="right">
          <div class="time">
            <i :class="time == 1 ? 'on' : ''" @click="time = 1">今日</i>
            <i :class="time == 2 ? 'on' : ''" @click="time = 2">本周</i>
            <i :class="time == 3 ? 'on' : ''" @click="time = 3">本月</i>
            <i :class="time == 4 ? 'on' : ''" @click="time = 4">本年</i>
          </div>
          <!-- <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker> -->
        </div>
      </div>
      <div class="chartContent">
        <div class="item" style="width: 32%">
          <div class="top">
            <span>支付渠道</span>
            <el-tabs v-model="activeName" class="tabsSet">
              <el-tab-pane label="支付金额" name="first"></el-tab-pane>
              <el-tab-pane label="支付笔数" name="second"></el-tab-pane>
            </el-tabs>
            <!-- <i>查看详情&nbsp;></i> -->
          </div>
          <div class="bottom">
            <div class="left" v-if="pieData.length != 0">
              <div style="height: 100%" ref="roomTypePie"></div>
            </div>
            <div v-else class="noData">暂无数据</div>
          </div>
        </div>
        <div class="item" style="width: 65%">
          <div class="top">
            <span>交易数据</span>
            <el-tabs v-model="activeName1" class="tabsSet">
              <el-tab-pane label="交易金额" name="first"></el-tab-pane>
              <el-tab-pane label="交易笔数" name="second"></el-tab-pane>
            </el-tabs>
            <!-- <i>查看详情&nbsp;></i> -->
          </div>
          <div class="bottom">
            <div class="left" style="width: 100%" v-if="x.length != 0">
              <div style="height: 100%" ref="occupancyAnalysis"></div>
            </div>
            <div v-else class="noData">暂无数据</div>
          </div>
        </div>
      </div>
      <!-- 支付趋势 -->
      <div class="chartContent">
        <div class="item" style="width: 100%">
          <div class="top">
            <span>支付趋势</span>
            <el-tabs v-model="activeName2" class="tabsSet">
              <el-tab-pane label="交易金额" name="first"></el-tab-pane>
              <el-tab-pane label="交易笔数" name="second"></el-tab-pane>
            </el-tabs>
            <!-- <i>查看详情&nbsp;></i> -->
          </div>
          <div class="bottom">
            <div class="left" style="width: 100%">
              <div style="height: 100%" ref="refundMOney"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- table -->

      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="今日订单" name="first"></el-tab-pane>
            <el-tab-pane label="今日退房" name="second"></el-tab-pane>
            <el-tab-pane label="明日入住" name="third"></el-tab-pane>
            <el-tab-pane label="明日退房" name="fourth"></el-tab-pane>

        </el-tabs> -->
    </div>
  </div>
</template>

<script>
var that;
import * as echarts from "echarts";
export default {
  components: {},
  watch: {
    time(newval, oldval) {
      if (newval != oldval) {
        this.getMerchantOrderPieAnalyse();
        this.getMerchantCurveAnalyse();
        this.getMerchantProductsDealAnalyse();
      }
    },
    activeName1(newval, oldval) {
      if (newval != oldval && newval == "first") {
        this.bar(this.x, this.y);
      } else {
        this.bar(this.x, this.z);
      }
    },
    activeName2(newval, oldval) {
      if (newval != oldval && newval == "first") {
        this.line(this.x1, this.y1);
      } else {
        this.line(this.x1, this.z1);
      }
    },
    activeName(newval, oldval) {
      if (newval != oldval) {
        this.pie(this.pieData);
      }
    },
  },
  filters: {
    delStatus(val) {
      if (val) {
        let d = that.roomStatus.filter((item) => item.val == val);
        if (d.length != 0) {
          return d[0].label;
        }
      }
    },
  },
  data() {
    return {
      value1: "",
      time: 4,
      payStyle: ["微信", "支付宝", "云闪付"],
      activeName: "first",
      activeName1: "first",
      activeName2: "first",
      info: {
        beCheckinOrders: 0,
        todayOrders: 0,
        totalAmount: 0,
        undeterminedOrders: 0,
        unpaidOrders: 0,
      },
      dataForm: {
        orderStatus: "",
        arriveDate: "",
        leaveDate: "",
        todayOrder: "",
      },
      x: [],
      y: [],
      z: [],
      x1: [],
      y1: [],
      z1: [],
      pieData: [],
      num: 0,
      totalMoney: 0,
      merchantCategory: localStorage.getItem("ss_merchantCategory"),
    };
  },
  created() {
    that = this;
    this.getInfo();
  },
  mounted() {
    setTimeout(() => {
      this.getMerchantOrderPieAnalyse();
      this.getMerchantCurveAnalyse();
      this.getMerchantProductsDealAnalyse();
      this.line();
    }, 500);
  },
  methods: {
    //饼图
    getMerchantOrderPieAnalyse() {
      var url = "";
      if (this.merchantCategory == 4) {
        //餐饮美食
        url = "/scenic/merchant/food/home/getMerchantOrderPieAnalyse";
      } else {
        //渔家乐
        url = "/scenic/fisheringHome/getFisheringOrderPieAnalyse";
      }
      this.$http
        .post(url, {
          merchantId: this.$store.state.user.MerchantId,
          merchantType: this.merchantCategory,
          dateType: this.time + "",
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.pieData = res.data.data;
            let num = 0;
            let totalMoney = 0;
            res.data.data.forEach((element) => {
              num += parseFloat(element.orderNums);
              totalMoney += parseFloat(element.orderAmounts);
            });
            this.num = num;
            this.totalMoney = totalMoney;
            setTimeout(() => {
              this.pie(res.data.data);
            }, 500);
          }
        });
    },
    getMerchantCurveAnalyse() {
      //折线图
      var url = "";
      if (this.merchantCategory == 4) {
        //餐饮美食
        url = "/scenic/merchant/food/home/getMerchantCurveAnalyse";
      } else {
        //渔家乐
        url = "/scenic/fisheringHome/getFisheringCurveAnalyse";
      }
      this.$http
        .post(url, {
          merchantId: this.$store.state.user.MerchantId,
          merchantType: this.merchantCategory,
          dateType: this.time + "",
        })
        .then((res) => {
          if (res.data.code == 0) {
            let x = [],
              y = [],
              z = [];
            for (let i = 0; i < res.data.data.length; i++) {
              x.push(res.data.data[i].dateKey);
              y.push(res.data.data[i].orderAmounts);
              z.push(res.data.data[i].orderNums);
            }
            //金额
            this.x1 = x;
            this.y1 = y;
            this.z1 = z;
            setTimeout(() => {
              this.line(x, y);
            }, 500);
          }
        });
    },
    getMerchantProductsDealAnalyse() {
      //柱状图
      var url = "";
      if (this.merchantCategory == 4) {
        //餐饮美食
        url = "/scenic/merchant/food/home/getMerchantProductsDealAnalyse";
      } else {
        //渔家乐
        url = "/scenic/fisheringHome/getFisheringDealAnalyse";
      }
      this.$http
        .post(url, {
          merchantId: this.$store.state.user.MerchantId,
          merchantType: this.merchantCategory,
          dateType: this.time + "",
        })
        .then((res) => {
          if (res.data.code == 0) {
            let x = [],
              y = [],
              z = [];
            for (let i = 0; i < res.data.data.length; i++) {
              x.push(res.data.data[i].productName);
              y.push(res.data.data[i].orderAmounts);
              z.push(res.data.data[i].orderNums);
            }
            //金额
            this.x = x;
            this.y = y;
            this.z = z;
            setTimeout(() => {
              this.bar(x, y);
            }, 500);
          }
        });
    },
    line(x, yData) {
      let myChart = echarts.init(this.$refs.refundMOney);
      const colorList = ["#3347FF"];
      const seriesCommonFn = (name, data, color) => {
        return {
          name: name,
          data: data,
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 10,
          emphasis: {
            focus: "series",
          },
          animationDuration: 1500,
          lineStyle: {
            width: 3,
          },
          areaStyle: {
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(51, 71, 255, .1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(51, 71, 255, .1)", // 100% 处的颜色
                },
              ],
            },
          },
        };
      };
      // const xData = ['07/21', '07/22', '07/23', '07/24', '07/25', '07/26', '07/27'];
      const y = [
        {
          name: "",
          data: yData,
        },
      ];
      const option = {
        color: colorList,
        legend: {
          show: true,
          right: 0,
          itemGap: 40,
          textStyle: {},
          itemStyle: {
            borderColor: "transparent",
            borderWidth: 6,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            return (
              params[0].name +
              (that.time == 4 ? "月" : "") +
              ":" +
              params[0].value +
              (that.activeName2 == "first" ? "元" : "笔")
            );
          },
          color: "#000",
          borderColor: "transparent",
          backgroundColor: "rgba(116, 126, 253, 0.6)",
          extraCssText: "backdrop-filter: blur(6px);",
        },
        grid: {
          top: "14%",
          left: "2%",
          right: "2.5%%",
          bottom: "8%",
          containLabel: true,
        },
        series: y.map((item, index) => {
          return seriesCommonFn(item.name, item.data, colorList[index]);
        }),
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: x,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：" + (that.activeName2 == "first" ? "元" : "笔"),
            splitLine: {
              show: true,
              lineStyle: {
                // 虚线
                type: [5, 5],
                dashOffset: 0,
                shadowBlur: 0,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    bar(x, yData) {
      let myChart = echarts.init(this.$refs.occupancyAnalysis);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            let htmlStr = "";
            for (let i = 0; i < params.length; i++) {
              const param = params[i];
              const xName = param.name;
              const seriesName = param.seriesName;
              let value = "";
              const color = param.color;
              if (i === 0) {
                htmlStr += xName + "<br/>";
              }
              htmlStr += "<div>";
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>';
              if (param.value !== null && param.value !== undefined) {
                value = param.value;
                htmlStr +=
                  seriesName +
                  ": " +
                  value +
                  (that.activeName1 == "first" ? "元" : "笔");
              } else {
                value = "-";
                htmlStr += seriesName + ": " + value;
                htmlStr += "</div>";
              }
            }
            return htmlStr;
          },
          // formatter: '{a}<br />{c}'
        },
        color: ["#4096FD"],
        grid: {
          top: "12%",
          left: "3%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#EAEDF1",
              },
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              margin: 12,
              textStyle: {
                color: "#293C73",
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
            data: x,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:" + (that.activeName1 == "first" ? "元" : "笔"),
            textStyle: {
              color: "#293C73",
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#EAEDF1",
                type: "dashed",
              },
            },
            axisLine: {
              // 坐标轴轴线相关设置。数学上的y轴
              show: true,
              lineStyle: {
                color: "#293C73",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#293C73",
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            stack: "machine",
            barWidth: 16,
            label: {
              color: "#293C73",
              show: true,
              position: "top",
            },
            markLine: {
              //mark线  平均值average
              data: [
                {
                  type: "average",
                  name: "Avg",
                  lineStyle: {
                    // 警戒线样式
                    type: "solid",
                    color: "#3CD45F",
                  },
                },
              ],
            },
            data: yData,
          },
        ],
      };

      myChart.setOption(option);
    },
    pie(dataOrgin) {
      let myChart = echarts.init(this.$refs.roomTypePie);
      let data = dataOrgin.map((item) => {
        return {
          name: that.payStyle[item.payType - 1],
          value:
            that.activeName == "first"
              ? Math.floor(item.orderAmounts * 1000) / 1000
              : Math.floor(item.orderNums * 1000) / 1000,
        };
      });
      const option = {
        animation: true,
        title: {
          text: that.activeName == "first" ? this.totalMoney : this.num,
          subtext: that.activeName == "first" ? "订单金额" : "订单数",
          x: "center",
          y: "center",
          textStyle: {
            color: "#293C73",
            fontSize: 20,
            fontWeight: "bold",
          },
          subtextStyle: {
            color: "#53628F",
            fontSize: 13,
            fontWeight: "normal",
          },
        },
        legend: {
          show: true,
          orient: "vertical",
          right: "10%",
          top: "50%",
        },
        tooltip: {
          show: true,
          backgroundColor: "#fff",
          borderColor: "#ddd",
          borderWidth: 1,
          formatter: (p) => {
            console.log(p);
            let txtCon =
              "<div style='text-align:left'>" +
              `<span style='color:#293C73'>` +
              p.name +
              `</span><span style='color:#293C73'> ` +
              p.value +
              (that.activeName == "first" ? "元" : "笔");
            ("</span></div>");
            return txtCon;
          },
        },
        series: {
          type: "pie",
          center: ["50%", "50%"],
          radius: ["45%", "70%"],
          data: data,
          itemStyle: {
            borderColor: "#ffffff",
            borderWidth: 3,
          },
          color: ["#3347FF", "#B1E8FC", "#BACEFD"],
          labelLine: {
            show: true,
          },
          label: {
            show: true,
          },
        },
      };
      myChart.setOption(option);
    },
    getInfo() {
      //统计
      var url = "";
      if (this.merchantCategory == 4) {
        //餐饮美食
        url = "/scenic/merchant/food/home/getManageOverview";
      } else {
        //渔家乐
        url = "/scenic/fisheringHome/getFisheringOverview";
      }
      this.$http
        .post(url, {
          merchantId: this.$store.state.user.MerchantId,
          merchantType: this.merchantCategory,
          dateType: this.time + "",
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
          }
        });
    },
    // getRoomType() {
    //     this.$http.get('/hotel/home/getRoomSalesVolume', {
    //         params: {
    //             homestayId: this.$store.state.user.homestayId,
    //             queryType: this.time
    //         }
    //     }).then(res => {
    //         if (res.data.code == 0) {
    //             this.roomTypeData = res.data.data || [];
    //             this.pie(this.roomTypeData);
    //         }

    //     })
    // },
  },
};
</script>

<style lang="scss" scoped>
.noData {
  height: 260px;
  line-height: 260px;
  text-align: center;
}
.homestayOverview {
  display: grid;
  gap: 0 16px;
  grid-template-columns: auto auto auto auto auto;
  margin-bottom: 10px;
  margin-top: -8px;

  .item {
    border-radius: 6px;
    display: flex;
    padding: 24px 20px 24px 20px;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;

    &:nth-child(1) {
      background: url(~@/assets/img/business/index2/bg.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(2) {
      background: url(~@/assets/img/business/index1/bg2.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(3) {
      background: url(~@/assets/img/business/index1/bg2.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(4) {
      background: url(~@/assets/img/business/index1/bg3.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(5) {
      background: url(~@/assets/img/business/index1/bg4.png) center no-repeat;
      background-size: 100% 100%;
    }

    .left {
      p {
        margin: 0;
        color: #fff;

        &:first-child {
          font-size: 16px;
          color: #fff;
          margin-bottom: 8px;
        }

        &:last-child {
          font-size: 32px;
          font-weight: bold;
        }
      }
    }

    img {
      width: 56px;
      height: 56px;
    }
  }
}

.tableBox {
  border-radius: 6px;
  padding: 0 20px 20px;
  background-color: #fff;

  ::v-deep .el-tabs__item {
    font-size: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    color: #53628f;
    padding: 16px;
    height: auto;
    line-height: normal;

    &.is-active {
      font-weight: bold;
      color: #1372ff;
    }
  }
}

.chart {
  background: #fff;

  .chartHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 0 0 32px;
    border-bottom: 1px solid #eaedf1;

    ::v-deep .el-range-editor.el-input__inner {
      transform: scale(0.75);
      margin-left: -35px;
    }

    .right {
      width: 200px;
      flex: 1;
      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .time {
        i {
          display: inline-block;
          width: 72px;
          height: 28px;
          background: #eaedf1;
          border-radius: 4px;
          font-style: inherit;
          text-align: center;
          line-height: 28px;
          color: #293c73;
          margin: 0 4px;

          &.on {
            background: #1372ff;
            color: #fff;
          }
        }
      }
    }
  }

  .chartContent {
    padding: 24px 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      background: #ffffff;
      border-radius: 6px;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaedf1;
        position: relative;

        span {
          display: block;
          flex: 1;
          font-size: 16px;
          font-weight: bold;
          padding: 0 0 8px 12px;
          color: #293c73;
          position: relative;

          &::after {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 3px;
            height: 16px;
            background: #1372ff;
            border-radius: 62px;
          }
        }

        i {
          font-style: inherit;
          color: #53628f;
          font-size: 14px;
          margin-bottom: 10px;
        }
      }

      .bottom {
        padding-top: 20px;

        .left {
          height: 260px;
        }
      }
    }
  }
}

.tabsSet {
  position: absolute;
  left: 105px;
  bottom: -16px;
  z-index: 0;

  ::v-deep.el-tabs__item {
    color: #53628f;
  }

  ::v-deep.el-tabs__nav-wrap::after {
    background-color: transparent;
  }
}
</style>
